<template>
	<div class="wow fadeInDown">
        <div v-for="blog in blogs">
            <div class="blog-main">
                <div class="heading-blog">
                    <router-link tag='a' :to="{name:'post',params:{postId:blog._id}}">{{blog.title}}</router-link>
                </div>
                <img :src="'http://140.143.58.13:3000'+blog.imgPath" class="img-responsive img-rounded" />
                <div class="blog-info">
                    <span class="label label-success">{{blog.categoryName}}</span>
                    <span class="label label-danger">By Leil</span>
                    <span class="label label-info">{{blog.updateTime}}</span>
                </div>
                <div class="blog-txt" v-html="blog.postDescription">
                </div>
                <div id="read-more-panel">
                <router-link id="read-more" tag='a' :to="{name:'post',params:{postId:blog._id}}">阅读全文</router-link>
                </div>
            </div>
        </div>
                    
        <!--BLOG THREE END -->
        <nav v-bind:class="pageNum<=1 ? 'hide-panel' : ''">
            <ul class="pagination">
                <li v-bind:class="currentPage===1 ? 'disabled' : ''" @click="clickPrePage()"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
                <li v-for="n in pageNum" v-bind:class="currentPage===n ? 'active' : ''" @click="chlickNumPage(n)"><a href="#">{{n}} <span class="sr-only"></span></a></li>
                <li v-bind:class="currentPage===pageNum ? 'disabled' : ''" @click="clickNextPage()"><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
            </ul>
        </nav>
        <!--PAGING  END -->

    </div>
</template>

<script>

import marked from "marked"

export default {
    data() {
        return {
            blogs: [],
            pageNum: 0,
            currentPage: 1,
            activeClass: 'active'
        }
    },
	mounted: function() {
        this.getPageNum()

        setTimeout(() => {
            this.getPosts()
        }, 200)
		// this.getPosts()
	},
	methods: {
		getPosts: function() {
            this.$axios.get(`/api/getPostsByPage/${this.currentPage}`)
                    .then(res => {
                        // console.log(res)
                        for (let blog of res.data) {
                            blog.postDescription = marked(blog.postDescription)
                        }
                        this.blogs = res.data
                    })
                    .catch(error => {
                        console.log(error)
                    })
        },

        getPageNum: function() {
            this.$axios.get("/api/getPageNum")
                    .then(res => {
                        this.pageNum = res.data.pageNum
                    })
                    .catch(error => {
                        console.log(error)
                    })
        },

        clickPrePage: function() {
            this.currentPage -= 1
            this.getPosts()
        },

        clickNextPage: function() {
            this.currentPage += 1
            this.getPosts()
        },

        chlickNumPage: function(num) {
            this.currentPage = num
            this.getPosts()
        }

        
	}
}
</script>